<template>
  <div id="app">
    <!-- ref 属性在vue中用于标识元素，方便通过vc实例对象获取元素 -->
    <!-- <h1 ref="t1" v-text="title"></h1>
    <h2 ref="t2" v-text="title"></h2>
    <button ref="bt" @click="showElement">点我打印上面的元素</button>
    <School ref="sc"></School> -->

    <br>
    <!-- 通过属性传递数据 -->
    <!-- <student name="张三" :age="20"></student>
    <hr> -->
    <!-- v-bind: 简写为 : -->
    <!-- <student name="李四" :age="30"></student> -->

    <!-- <hr>
    <Demoa></Demoa> -->
    <!-- <hr>
    <Demob></Demob> -->

    <Democ></Democ>
    <Demod></Demod>
  </div>

</template>

<script>


// import School from './components/School.vue'
// import Student from './components/Student.vue'
// import Demoa from './components/Demoa.vue'
// import Demob from './components/Demob.vue'
import Democ from './components/Democ.vue'
import Demod from './components/Demod.vue'

export default {
  name: 'App',
  components: {
    // School,
    // Student,
    // Demoa,
    // Demob,
    Democ,
    Demod
  },
  data(){
    return {
      title: 'Vue 脚手架'
    }
  },
  methods: {
    showElement(){
      // this 标识的是当前 VueComponent 实例
      // console.log(this)
      // console.log(this.$refs)
    }
  }
}
</script>

<style>

</style>
